[김지원] JS 자판기 미션 제출 #19
Conversation
- 초기 로드 시, 상품 관리 화면으로 로드되도록 수정
id 추가
- 상품 추가 시, 최소 금액을 0으로 설정
-잔돈 section 제목 수정
|
와 작은 단위로 커밋하신거 대박이네요 |
sosoYim
left a comment
sosoYim
left a comment
There was a problem hiding this comment.
짧은 시간임에도 프로그램 전반적으로 함수와 구조가 깔끔하게 정리되어 사용된 느낌이었어요. 가독성도 좋고, 클래스를 잘 활용해 주셔서 많이 배울 수 있었습니다.
| margin: 10px; | ||
| } | ||
|
|
||
| table, |
There was a problem hiding this comment.
시맨틱 태그와 스타일까지 지원님도 아주 야무지시네요! 역시 야무데렛강사님의 제자십니다.
| @@ -0,0 +1,3 @@ | |||
| // 로컬 스토리지 get, set | |||
| export const getData = key => JSON.parse(window.localStorage.getItem(key)); | |||
There was a problem hiding this comment.
로컬스토리지의 값을 읽어오는 방식으로 프로그램이 동작하게 하셨네요! 전 스토리지를 DB라고 치고 작업하면서 저장할 생각만하고 읽어올 생각은 못했어요ㅠㅜ
| import { validateProdList, validateChanges } from './utils/validation.js'; | ||
| import Dialog from './utils/dialog.js'; | ||
|
|
||
| export default class App { |
There was a problem hiding this comment.
App을 클래스로 만들어 하위 탭들에 대한 컨트롤러를 이용해 인스턴스를 만드는 방식이 매우 인상적이었어요.
각각의 컨트롤러에서 작성된 렌더 메서드를 App 클래스 내부 메서드로 재정의해서 사용하니 컨트롤러들의 컨트롤 타워 역할을 하는 것 같아요.
| setData('changeInfo', this.changeInfo); | ||
| } | ||
|
|
||
| constructor() { |
There was a problem hiding this comment.
클래스의 인스턴스를 생성하는 컨스트럭터가 get이나 set 메서드보다 상단에 있으면 더 익숙한 패턴이지 않을까요?
|
|
||
| try { | ||
| validateChange(+changeInput.value); | ||
| Dialog.show('잔돈이 성공적으로 충전되었습니다!'); |
|
|
||
| // 상품 데이터 관리 | ||
| export default class ProductManageModel { | ||
| productList; |
There was a problem hiding this comment.
현재 컨트롤러들이 뷰(관리 탭, 구매 탭, 잔돈 반환 탭)를 기준으로 구분되어 있어 마치 뷰를 기준으로 모델(producList, ...)도 구분되어 있는 것 같습니다.
그래서 프로그램 전반에 동일하게 사용되는 데이터(productList나 자판기의 잔돈 등)가 뷰를 기준으로 나뉘어 관리되는 것 같아요.
현재는 로컬스토리지가 디비의 역할을 해서 하나의 탭에서 한 명의 사용자만 데이터를 수정하기에 문제가 없지만 서버에서 디비를 관리하고 불러오는 방식이라면 데이터 불일치를 발생시키지 않을까 우려스럽네요.
사실 자판기 과제로 구조 말하는게 민망하지만 구조를 워낙 가독성있게 잘 짜주셔서 이런 생각도 들었습니당
4 participants
1. 테스트 결과
2. 구조
각 메뉴(탭) 별로
model,view,controller구현3. 보완할 부분
상품 구매메뉴의잔돈 반환기능 중 다음 조건 미충족 상태, 추후 보완 예정